<template>
  <div id="all">
    <!--主界面-->
    <div v-if="isMain">
      <el-card class="box-card" style="width: 1180px">
        <div class="search">
          <el-row gutter="20">
            <el-col :span="6">
              <el-input
                size="medium"
                placeholder="请输入车牌号"
                v-model="query.carLicensePlate"
              >
              </el-input>
            </el-col>

            <el-col :span="6">
              <el-input
                size="medium"
                placeholder="请输入车牌类型"
                v-model="query.clLicenseType"
              >
              </el-input>
            </el-col>

            <el-col :span="6">
              <el-input
                size="medium"
                placeholder="请输入用户名"
                v-model="query.userName"
              >
              </el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="medium" @click="loadCarMessage()"
                >查询</el-button
              >
            </el-col>

            <el-col :span="2">
              <el-button type="info" size="medium" @click="reset()"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </div>

        <!--表格-->
        <el-table :data="carMessageList" stripe style="width: 100%">
          <el-table-column prop="carLicensePlate" label="车牌号">
          </el-table-column>

          <el-table-column prop="clLicenseType" label="车牌类型">
          </el-table-column>

          <el-table-column prop="userName" label="所属用户"> </el-table-column>

          <el-table-column prop="a" label="订单数量"> </el-table-column>

          <el-table-column prop="b" label="异常订单数量"> </el-table-column>

          <el-table-column prop="c" label="消费金额"> </el-table-column>

          <el-table-column prop="d" label="异常消费金额"> </el-table-column>

          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="priamry"
                @click="handleDetailOrder(scope.row.carLicensePlate)"
                >订单记录</el-button
              >
              <el-popconfirm
                title="确定要禁用此账户吗？"
                @confirm="handleBan(scope.row.userId)"
              >
                <el-button size="mini" slot="reference" type="danger"
                  >禁用账户</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageIndex"
          :page-sizes="pageInfo.pageSizes"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        >
        </el-pagination>
      </el-card>
    </div>
    <!--订单记录---------------------------------------------------------------------------------------->
    <div v-if="!isMain">
      <el-card class="box-card" style="width: 1180px">
        <div class="search">
          <el-row gutter="20">
            <el-col :span="6">
              <el-input
                size="medium"
                placeholder="请输入支付方式"
                v-model="query2.ptType"
              >
              </el-input>
            </el-col>

            <el-col :span="2">
              <el-button type="primary" size="medium" @click="loadCarOrderMessage()"
                >查询</el-button
              >
            </el-col>

            <el-col :span="12">
              <el-button type="info" size="medium" @click="reset2()"
                >重置</el-button
              >
            </el-col>

            <el-col :span="1">
              <el-button type="info" size="medium" @click="goback()"
                >返回</el-button
              >
            </el-col>
          </el-row>
        </div>

        <!--表格-->
        <el-table :data="carOrderMessageList" stripe style="width: 100%">
          <el-table-column prop="oiNo" label="订单编号" width="310"> </el-table-column>

          <el-table-column prop="payingTime" label="支付时间" width="200">
          </el-table-column>

          <el-table-column prop="carLicensePlate" label="车牌号">
          </el-table-column>

          <el-table-column prop="oiAmount" label="订单金额"> </el-table-column>

          <el-table-column  prop="ptType" label="支付方式"> </el-table-column>

          <el-table-column prop="orderStatus" label="订单状态">
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="query2.pageIndex"
          :page-sizes="pageInfo2.pageSizes"
          :page-size="query2.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo2.total"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: "Admin",
  data() {
    return {
      isMain: true,
      carMessageList: [],
      pageInfo: {
        pageSizes: [5, 10, 20, 50],
        total: "",
        pages: "",
      },
      //封装的请求参数
      query: {
        pageIndex: 1,
        pageSize: 5,
        carLicensePlate: "",
        clLicenseType: "",
        userName: "",
      },

      //-=========点击订单记录页面内的数据===============================
      carOrderMessageList: [],
      pageInfo2: {
        pageSizes: [5, 10, 20, 50],
        total: "",
        pages: "",
      },
      //封装的请求参数
      query2: {
        pageIndex: 1,
        pageSize: 5,
        ptType: "",
      },
    };
  },
  //-=========方法=======================================================
  methods: {

    //禁用账户
    handleBan(userId){

      
        this.$axios.put("admin/user/update/"+userId).then(res=>{
            if (res.data.code == 200) {
					this.$message.success("修改成功");
					this.loadUser();
				} else {
					this.$message.error("该用户已经是禁用状态");
					}
        })



    },
    //重置按钮
    reset() {
      (this.query.carLicensePlate = ""),
        (this.query.clLicenseType = ""),
        (this.query.userName = ""),
        this.loadCarMessage();
    },

    //当每页显示条数改变时
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.loadCarMessage();
    },
    //当页数改变时
    handleCurrentChange(currentPage) {
      this.query.pageIndex = currentPage;
      this.loadCarMessage();
    },
    loadCarMessage() {
      this.$axios.post("adminCar/queryAllCarMessage", this.query).then((res) => {
        this.carMessageList = res.data.data.list;
        this.pageInfo.pages = res.data.data.pages;
        this.pageInfo.total = res.data.data.total;
      });
    },

    handleDetailOrder(carLicensePlate) {
      this.isMain = !this.isMain;
      this.query2.carLicensePlate = carLicensePlate;
      this.loadCarOrderMessage();
    },
    //-=========点击订单记录页面内的方法===============================
    //重置按钮
    reset2() {
      (this.query2.ptType = ""), this.loadCarOrderMessage();
    },

    //当每页显示条数改变时
    handleSizeChange2(size) {
      this.query2.pageSize = size;
      this.loadCarOrderMessage();
    },
    //当页数改变时
    handleCurrentChange2(currentPage) {
      this.query2.pageIndex = currentPage;
      this.loadCarOrderMessage();
    },
    loadCarOrderMessage() {
      this.$axios
        .post("adminCar/queryAllCarOrderMessage", this.query2)
        .then((res) => {
          this.carOrderMessageList = res.data.data.list;
          this.pageInfo2.pages = res.data.data.pages;
          this.pageInfo2.total = res.data.data.total;
        });
    },

    goback() {
      this.isMain = !this.isMain;
    },
  },
  mounted() {
    this.loadCarMessage();
  },
};
</script>

<style scoped>
</style>